<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				{{title}}
			</view>
		</u-navbar>
		<view class="main-top" v-if="live_data.id"  @click="multiRedirect('/pages/details/details?id='+live_data.id)">
			<image :src="live_data.cover_img" mode="aspectFill"></image>
			<view class="u-flex justify-between">
				<view class="u-flex-1">
					<view class="u-font-30 text-bold">
						{{live_data.name}}
					</view>
					<view class="u-font-24">
						{{live_data.intro}}
					</view>
				</view>
				<view class="cu-btn round bg-orange">
					查看
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-box" v-for="(item,index) in list" :key="index">
				<view class="title u-flex justify-between">
					<view class="u-font-32">
						{{item.name}}
					</view>
					<view class="u-font-24" @click="multiRedirect('/pages/index/more?title='+item.name+'&ct_id='+item.id)">
						查看更多
					</view>
				</view>
				<view class="">
					<view class="u-flex" @click="multiRedirect('/pages/details/details?id='+video.id)" v-for="(video,video_index) in item.video_list" :key="video_index">
						<image :src="video.cover_img" mode="aspectFill"></image>
						<view class="u-flex-1">
							<view class="u-font-30 text-bold">
								{{video.name}}
							</view>
							<view class="u-font-24">
								{{video.intro}}
							</view>
						</view>
						<view class="cu-btn round bg-orange">
							查看
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				listQuery:{
					origin:'sinatv',
					cid: '',
					page: 1,
				},			
				live_data:{},
				list: [],
				total_page:false,
			}
		},
		onLoad(options) {
			this.title = options.title||"直播入口"
			this.listQuery.cid = options.cid || 0;
			this._initData(true);
		},
		onReachBottom() {
			console.log('-----onReachBottom')
			if(this.total_page!==false && this.listQuery.page<=this.total_page){
				this._initData();
			}
		},
		methods: {
			Back() {
				uni.navigateBack({});
			},
			
			_initData(is_reset) {
				if (is_reset === true) {
					this.listQuery.page=1
					this.total_page = false;
					this.list = [];
				}
				this.$u.http.post('/api/course/cateLists',this.listQuery).then(({
					data
				}) => {
					this.live_data = data.live_data||{}
					this.list = this.list.concat(data.list || [])
					this.listQuery.page++
					this.total_page = data.total_page || 0		
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.main-top {
		padding: 35rpx 30rpx;

		image {
			width: 690rpx;
			height: 409rpx;
			border-radius: 10rpx;
		}
		.u-flex-1{
			margin-right: 15rpx;
		}
		.u-flex {
			margin: 30rpx 20rpx 0;

			.u-font-30 {
				color: #333;
				margin-right: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.u-font-24 {
				color: #999;
				margin-top: 20rpx;
			}

			.cu-btn {
				width: 145rpx;
				height: 60rpx;
				font-size: 24rpx;
			}
		}
	}

	.main {
		.main-box {
			.title {
				padding: 30rpx;

				.u-font-24 {
					color: #999;
					margin-top: 0rpx;
				}
			}
		}

		.u-flex {
			padding: 0rpx 30rpx 35rpx;
			background-color: #FFFFFF;

			image {
				width: 230rpx;
				height: 140rpx;
				border-radius: 6rpx;
				margin-right: 16rpx;
			}

			.u-flex-1 {
				height: 140rpx;
				margin-right: 10rpx;
			}

			.u-font-30 {
				color: #333;
				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.u-font-24 {
				color: #999;
				margin-top: 20rpx;
			}

			.cu-btn {
				font-size: 24rpx;
			}
		}
	}
</style>
